<template>

    <div>
        <div class="s_banner" key="id">
            <div class="header s_header">
                <router-link to="Serviceofficelist">
                    <img src="@/assets/sfj/images/fh1.png" alt="">法律服务所名称
                </router-link>
            </div>
            <dl class="lss_jj">
                <dt><img :src="legalServiceInfo.photo" alt=""></dt>
                <dd><p>{{legalServiceInfo.name}}<span><i></i>{{legalServiceInfo.tag}}</span></p><span>{{legalServiceInfo.phone}}</span>
                    <span>{{legalServiceInfo.field}}</span></dd>
            </dl>
        </div>

        <div class="main">
            <h1 class="bt">律师事务所简介</h1>
            <div class="text-box">
                <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
                    <span ref="spanBox" v-html="legalServiceInfo.introduction"></span>
                </div>
                <div class="btn" v-if="ifOver" @click="unfold = !unfold">{{unfold ? '收起' : '展开全部内容'}}</div>
            </div>
        </div>

        <ul class="jj">
<!--            <li><span>执业年限：</span>{{legalServiceInfo.practiceYears}}&ensp;年</li>-->
<!--            <li><span>执业证号：</span>{{legalServiceInfo.practiceCertification}}</li>-->
            <li><span>联系电话：</span>
                <a :href="'tel:' + legalServiceInfo.phone">{{legalServiceInfo.phone}}<img src="@/assets/sfj//images/tel.png" alt="">
                </a>
            </li>
            <li><span>联系地址：</span>{{legalServiceInfo.address}}<img src="@/assets/sfj//images/dz.png" alt=""></li>
            <li><span>擅长领域：</span>{{legalServiceInfo.field}}</li>
        </ul>
    </div>
</template>

<script>
    import home from "@/api/fwsdetail/home";

    export default {
        name: "text-box",
        data() {
            return {
                legalServiceInfo_id: this.$route.query.id,
                legalServiceInfo: {},
                ifOver: true, // 文本是否超出三行，默认否
                unfold: false, // 文本是否是展开状态 默认为收起
            };
        },
        methods: {
            getDetailById(name) {
                home.getDetailById(name)
                    .then(response => {
                        this.legalServiceInfo = response.data.data;
                    });
            },
        },
        mounted: function () {
            // 判断是否显示展开收起按钮
            // this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight;
            this.getDetailById(this.legalServiceInfo_id);
        },
    }
</script>

<style scoped>
    /*@import "../assets/sfj/css/base.css";*/
    /*@import "../assets/sfj/css/other.css";*/

    .txt{
      font-size: 16px;
      color: #333;
      margin-bottom: 5px;
    }
    .over-hidden {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .btn {
      color: #357892;
    }

</style>
